<template>
    <div>
        <!-- 使用组件 -->
        <myheader/>
        <h1>这是注册页面</h1>
        
        <van-form @submit="add">
            <van-field 
                v-model="form.username" 
                label="用户名" 
                name="用户名" 
                placeholder="请输入用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />

            <van-field 
                v-model="form.password" 
                type="password"
                label="密码" 
                name="password" 
                placeholder="请输入密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />

            <van-field 
                v-model="form.mobile" 
                label="手机号" 
                name="手机号" 
                placeholder="请输入手机号"
                :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <drag-verify
                :width="400"
                :height="30"
                text="请拖动滑块!"
                ref="Verify"
            />

            <van-button round type="info" native-type="submit" >注册</van-button>

        </van-form>


    </div>
</template>

<script>
//导入头部文件
import myheader from "../myheader";
import dragVerify from 'vue-drag-verify'
export default {
    data(){
        return{
            form:{},
        }
    },

    methods: {
        add(){
            console.log(this.$refs.Verify.isPassing )
            if (this.$refs.Verify.isPassing){
                this.$axios.post('users/reg/',this.form)
                .then(res=>{
                    if(res.data.code==200){
                        this.$toast.fail("注册成功")
                        this.$router.push({"path":'/login'})
                    }else if(res.data.code==10012){
                        this.$toast.fail("输入得手机号不合法")
                    }else if(res.data.code==10010){
                        this.$toast.fail("注册失败")
                    }
                })
            }else{
                this.$toast.fail('请拖动滑块')
            }
        },
    },

    mounted() {
        
    },

    components: {
      'myheader': myheader,
      'dragVerify':dragVerify
    }
}
</script>

<style scoped>

</style>